<template>
	<view>
		<view class="center">
			<!-- 收货人 -->
			<view class="shouhuo">
				<text class="shouhuo-txt">收货人</text>
				<input v-model="userInfo.name" class="shouhuo-input" type="text" placeholder="输入收货人姓名"
					placeholder-style="font-size:30rpx" />
			</view>
			<!-- 选择性别 -->
			<view class="chooes">
				<radio-group name="radio" @change="chooseSexHandler">
					<label>
						<radio value="先生" checked="true" color="#0f0f0f"  /><text class="radio">先生</text>
					</label>
					<label>
						<radio value="女士" color="#0f0f0f" /><text>女士</text>
					</label>
				</radio-group>
			</view>
			<!-- 手机号码 -->
			<view class="num">
				<text class="num-txt">手机号码</text>
				<input v-model="userInfo.number" class="input" type="tel" placeholder="输入手机号码" />
				<text class="num-txt2" @click="$refs.pop.open()">自动获取</text>
			</view>
			<!-- 收货地址 -->
			<view class="address">
				<text class="address-txt">收货地址</text>
				<textarea type="text" v-model="userInfo.address" class="address-txt1" placeholder="输入收货地址"
					placeholder-style="font-size:30rpx" />
				<image class="img" src="/static/my-img/地图.png" mode="" @click="jumpToMap"></image>
			</view>
			<!-- 门牌号 -->
			<view class="menpai">
				<text class="menpai-txt">门牌号</text>
				<input class="input" v-model="userInfo.menpai" type="text" placeholder="例如:xx室xx号"
					placeholder-style="font-size:30rpx" />
			</view>
		</view>

		<!-- 底部 -->
		<view class="bottom">
			<view class="moren">
        <view class="radio" @click="show=!show">
          <view class="radio-dot" v-if="show"></view>
        </view>
				<text class="moren-txt">设为默认地址</text>
			</view>
			<button class="button" @click="ok">确定</button>
		</view>


		<!-- 自动获取 -->
		<uni-popup ref="pop" type="bottom">
			<my-info-autons @noclose="$refs.pop.close()" :data="num" @changeNums="changeNums"></my-info-autons>
		</uni-popup>
	</view>
</template>

<script>
	import {mapState} from "vuex"
  import util from "@/utils/util.js"
	export default {
		data() {
			return {
        //当前是否选中默认地址
        show:false,
				userInfo: {
          id:"",
					name: "",
					number: "",
					address: "",
					menpai: "",
          gendar:"先生",
          //是否为默认地址
          flag:false
				},
				addresses: [],
				address: [],


			}
		},
		computed: {
			...mapState("user", ["addr","user","editUser"])
		},
		watch: {
      show(val){
        // if(val){
          this.userInfo.flag = val
        // }
      }
		},
		methods: {
      //处理性别选择
      chooseSexHandler(e){
        this.userInfo.gendar = e.detail.value
      },
			async test() {
				const user = uniCloud.importObject("user")
				const {data: res} = await user.getAddress()
				console.log(res);
				this.addresses = res[0].addressInfo
			},
			changeNums(val) {
				this.user.number = val

			},
			//跳转到地图页面
			jumpToMap() {
				uni.navigateTo({
					url: "/my/map/map"
				})
			},
			// 确定按钮
			async ok() {
       const user = uniCloud.importObject("user")
        //编辑
				if(this.editUser !==''){
          const {data:r} = await user.updateUserAddressInfo(this.user._id,this.userInfo)
          console.log(r);
          uni.showToast({
            title:"修改成功",
            icon:"success"
          })
          uni.navigateTo({
            url:"/my/my-address/my-address"
          })
          return
        }
					if ( this.userInfo.name === "") {
						uni.showToast({
							title: "请输入联系人姓名",
							icon: "none"
						})
            return
					} 
           if ( this.userInfo.number === "") {
						uni.showToast({
							title: "请输入收货人电话",
							icon: "none"
						})
            return
					} 
          if (this.userInfo.address === "") {
						uni.showToast({
							title: "请输入收货人地址",
							icon: "none"
						})
            return
					} 
          if ( this.userInfo.menpai === "") {
						uni.showToast({
							title: "请输入门牌号",
							icon: "none"
						})
            return
					} 
          this.userInfo.id = util.genrateCode()
     
          const {data:res} = await user.addAddress(this.user._id,this.userInfo)
					uni.showToast({
					  title:"添加成功",
            icon:"success"
					})
          uni.navigateTo({
            url:"/my/my-address/my-address"
          })
				}
			},
      created() {
         this.userInfo = this.editUser
      }
	}
</script>

<style lang="scss" scoped>
	// 收货人
	.shouhuo {
		border: 1rpx solid #000;
		width: 90%;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-left: 5%;
		margin-bottom: 20rpx;
		margin-top: 10rpx;

		.shouhuo-txt {
			margin-left: 20rpx;
			font-size: 30rpx;
		}

		.shouhuo-input {
			margin-left: 60rpx;
			color: #a2a2a2;
		}
	}

	// 性别选择
	.chooes {
		width: 90%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 5%;
		margin-bottom: 20rpx;

		.radio {
			margin-right: 30rpx;
		}
	}

	// 手机号
	.num {
		border: 1rpx solid #000;
		width: 90%;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-left: 5%;
		margin-bottom: 20rpx;

		.num-txt {
			margin-left: 20rpx;
			font-size: 30rpx;
		}

		.input {
			margin-left: 30rpx;
		}

		.num-txt2 {
			margin-left: 30rpx;
			font-size: 30rpx;
		}
	}

	// 收货地址
	.address {
		border: 1rpx solid #000;
		width: 90%;
		height: 250rpx;
		display: flex;
		// justify-content: space-between;
		margin-left: 5%;
		margin-bottom: 20rpx;

		.address-txt {
			// background-color: #000;
			margin-top: 30rpx;
			margin-left: 20rpx;
			font-size: 30rpx;
		}

		.address-txt1 {
			width: 400rpx;
			height: 200rpx;
			// border: 1rpx solid rebeccapurple;
			margin-top: 30rpx;
			margin-left: 30rpx;
		}

		.img {
			margin-left: 50rpx;
			margin-top: 20rpx;
			width: 50rpx;
			height: 60rpx;
		}
	}

	// 门牌号
	.menpai {
		border: 1rpx solid #000;
		width: 90%;
		height: 220rpx;
		display: flex;
		// align-items: center;
		margin-left: 5%;
		margin-bottom: 20rpx;

		.menpai-txt {
			margin-top: 30rpx;
			margin-left: 20rpx;
			font-size: 30rpx;
		}

		.input {
			margin-top: 30rpx;
			margin-left: 60rpx;
		}
	}

	// 最下方按钮
	.bottom {
		width: 100%;
		height: 150rpx;
		// border: 1rpx solid red;
		position: absolute;
		bottom: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		.moren {
			width: 300rpx;
			display: flex;
			margin-top: 15rpx;
      align-items: center;
      .radio{
        border: 1px #000 solid;
        height: 50rpx;
        width: 50rpx;
        border-radius: 50rpx;
        display:flex;
        justify-content: center;
        align-items: center;
        .radio-dot{
          height: 25rpx;
          width: 25rpx;
          border-radius: 25rpx;
          background-color: #000;
        }
      }
		}

		.moren-txt {
			margin-left: 10rpx;
			font-size: 30rpx;
			color: #a5a5a5;
			letter-spacing: 3rpx;
		}

		.button {
			width: 90%;
			height: 70rpx;
			margin-left: 5%;
			background-color: #000;
			color: #ffffff;
			letter-spacing: 3rpx;
		}
	}
</style>